<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

import { typeCountStatic } from "@/api/wasterTran/static";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      dataList: [],
      dataList1: [],

    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
    this.getTypeCountStatic()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    
    // 垃圾类型占比（统计）
    getTypeCountStatic() {
      console.log('getTypeCountStatic')
      let body = {
      }
      typeCountStatic(body).then(response => {
        console.log(response)
        this.dataList = response.data.map(item => {
              return {
                  value: item.totalMassCount,
                  name: item.wasterTypeName,
                  transCount: item.transCount,
                  wasterType: item.wasterType,
                  
              };
          });
        this.dataList1 = response.data.map(item => {
              return {
                  value: item.transCount,
                  name: item.wasterTypeName,
                  transCount: item.transCount,
                  
              };
          });
        // this.dataList = response.data

        this.initChart()
      })
    },

    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')


      this.chart.setOption({
    title : {
        text: '垃圾类型占比',
        x:'center'
    },
    // legend: {
    //     // Try 'horizontal'
    //     orient: 'horizontal',
    //     // orient: 'vertical',
    //     bottom: 10,
    //     // top: "center",
    //   },
    tooltip : {
        trigger: 'item',
        // formatter: "{a} <br/>{b} : {c} ({d}%)"
        formatter: "{a} <br/>{b} : {c} 吨 ({d}%)"
    },
    calculable : true,
    series : [
        {
            name:'垃圾转运量',
            type:'pie',
            // center: ['50%', '60%'],
            radius: ['40%', '60%'], // 设置内半径和外半径，这里设置饼图大小
            data: this.dataList,
        }
    ],
    series1 : [
        {
            name:'垃圾转运量',
            type:'pie',
            label: {
              show: false
            },
            // center: ['50%', '60%'],
            radius: ['40%', '60%'], // 设置内半径和外半径，这里设置饼图大小
            data: this.dataList,
        },{
            name:'运输次数',
            type:'pie',
            label: {
              show: false
            },
            // center: ['50%', '60%'],
            radius: ['0%', '30%'], // 设置内半径和外半径，这里设置饼图大小
            data: this.dataList1,
        }
    ]

      })}
  // this.chart.setOption({

  //       // title : {
  //       //   text: '消纳场所',
  //       //   // subtext: '纯属虚构',
  //       //   x:'center'
  //       // },
  //       // tooltip: {
  //       //   trigger: 'item',
  //       //   formatter: '{a} <br/>{b} : {c} ({d}%)'
  //       // },
  //       // legend: {
  //       //   left: 'center',
  //       //   bottom: '10'
  //       //   // ,
  //       //   // data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
  //       // },
  //       // series: [
  //       //   {
  //       //     name: '消纳场所',
  //       //     type: 'pie',
  //       //     roseType: 'radius',
  //       //     radius: [15, 95],
  //       //     center: ['50%', '38%'],
  //       //     data: [
  //       //       { value: 320, name: '长安区' },
  //       //       { value: 240, name: '桥西区' },
  //       //       { value: 149, name: '新华区' },
  //       //       { value: 100, name: '裕华区' },
  //       //       { value: 100, name: '高新区' },
  //       //       { value: 100, name: '‌井陉矿区' },
  //       //       { value: 100, name: '藁城区' },
  //       //       { value: 100, name: '鹿泉区' },
  //       //       { value: 100, name: '栾城区' }
  //       //     ],
  //       //     animationEasing: 'cubicInOut',
  //       //     animationDuration: 2600
  //       //   }
  //       // ]
  //     })}
  }
}
</script>
